<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>

    </style>
</head>
<body style="background:#fff;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">{{thtitle}}</div>
      </div>
      <div style="margin:1rem">
        月分析：{{thtitle}}
      </div>
      <div class="" id="main" style="width:100%;height:400px;margin-top:40px"></div>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script>
apiready = function () {
    $api.fixStatusBar($api.byId('header'));
    var ttitle = api.pageParam.title;
    var tlabel = api.pageParam.label;
    var ttype = api.pageParam.type;
    var ttimes = api.pageParam.times_no;
    var tdata = api.pageParam.data;

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
          thtitle:'',
          thlabel:'',
          thtype:'',
          thtimes:'',
          thdata:'',
        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        that.thtitle = ttitle;
        that.thlabel = tlabel;
        that.thtype = ttype;
        that.thtimes = ttimes;
        that.thdata = tdata.slice(0,4);
        that.getdata()

      },
      methods: {
        getdata:function(){
          let that=this;
          api.ajax({
            url:baseurl+'api/mgt/monthChart',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.thdata,
                label:that.thlabel,
                type:that.thtype,
                times_no:that.thtimes
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {

                  backgroundColor: '#fff',

                  title: {
                    text: '',//
                    subtext: '',
                    x: 'center'
                  },

                  legend: {
                    // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                    orient: 'horizontal',
                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'left',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: 'top',
                    data: ['去年本店均值','今年本店均值','今年小组均值','今年系统均值']
                  },

                  //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                  grid: {
                      top: '16%',   // 等价于 y: '16%'
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },

                  // 提示框
                  tooltip: {
                    trigger: 'axis'
                  },

                  xAxis: {
                    name: '',
                    type: 'category',
                    axisLine: {
                      lineStyle: {
                        // 设置x轴颜色
                        color: '#912CEE'
                      }
                    },
                    // 设置X轴数据旋转倾斜
                    axisLabel: {
                      rotate: 30, // 旋转角度
                      interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                      },
                    // boundaryGap值为false的时候，折线第一个点在y轴上
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月','12月']
                  },

                  yAxis: {
                    // name: '数值',
                    // type: 'value',
                    // min:0, // 设置y轴刻度的最小值
                    // max:1800,  // 设置y轴刻度的最大值
                    // splitNumber:9,  // 设置y轴刻度间隔个数
                    // axisLine: {
                    //   lineStyle: {
                    //     // 设置y轴颜色
                    //     color: '#87CEFA'
                    //   }
                    // },
                  },

                  series: [
                    {
                      name: '去年本店均值',
                      data: ret.data.arr1,
                      type: 'line',
                      // 设置小圆点消失
                      // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                      symbol: 'none',
                      // 设置折线弧度，取值：0-1之间
                      smooth: 0.5,
                    },

                    {
                      name: '今年本店均值',
                      data: ret.data.arr2,
                      type: 'line',
                      // 设置折线上圆点大小
                      symbol: 'none',
                      // 设置折线弧度，取值：0-1之间
                      smooth: 0.5,
                      // itemStyle:{
                      //   normal:{
                      //     // 拐点上显示数值
                      //     label : {
                      //     show: true
                      //     },
                      //     borderColor:'red',  // 拐点边框颜色
                      //     lineStyle:{
                      //       width:5,  // 设置线宽
                      //       type:'dotted'  //'dotted'虚线 'solid'实线
                      //     }
                      //   }
                      // }
                    },

                    {
                      name: '今年小组均值',
                      data: ret.data.arr3,
                      type: 'line',
                      // 设置折线上圆点大小
                      symbolSize:10,
                      // 设置拐点为实心圆
                      symbol:'circle',
                      itemStyle: {
                        normal: {
                          // 拐点上显示数值
                          label : {
                            show: true
                          },
                          lineStyle:{
                            // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                            color: 'rgba(0,0,0,0)'
                          }
                        }
                      }
                    },
                    {
                      name: '今年系统均值',
                      data: ret.data.arr4,
                      type: 'line',
                      // 设置折线上圆点大小
                      symbolSize:10,
                      // 设置拐点为实心圆
                      symbol:'circle',
                      itemStyle: {
                        normal: {
                          // 拐点上显示数值
                          label : {
                            show: true
                          },
                          lineStyle:{
                            // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                            color: 'rgba(0,0,0,0)'
                          }
                        }
                      }
                    }
                  ],

                  color: ['#3485FB', '#FF9F7F','#FFD700','#058142']
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
      }
    })
	}


	</script>
</body>
</html>
